.switch-button
  height: 0
  input[type=checkbox]
    height: 0
    width: 0
    visibility: hidden

  label
    cursor: pointer
    text-indent: -9999px
    width: 3.0rem
    height: 2rem
    background: $color-black-2
    display: flex
    justify-content: center
    align-items: center
    -webkit-border-radius: 10rem
    -moz-border-radius: 10rem
    border-radius: 10rem
    position: absolute
    bottom: 0.5rem
    right: 1rem
    z-index: 1

  label:after
    content: ''
    background: #fff
    width: 1rem
    height: 1rem
    -webkit-border-radius: 50%
    -moz-border-radius: 50%
    border-radius: 50%
    position: absolute
    top: 0.5rem
    left: 0.4rem
    transition: 300ms ease-in-out

  input:checked + label:after
    left: calc(100% - 5px)
    -webkit-transform: translateX(-100%)
    -moz-transform: translateX(-100%)
    -ms-transform: translateX(-100%)
    -o-transform: translateX(-100%)
    transform: translateX(-100%)
